<script setup lang="ts">
import {DataTableColumns, useDialog} from 'naive-ui'
import {onMounted, ref} from "vue";
import {blog_get_api} from '@api/blog.ts'
import {renderAction} from "@pages/blog/action.tsx";
import {useRouter} from "vue-router";

const router = useRouter()
const dialog = useDialog()
const loading = ref(false)
const columns: DataTableColumns = [
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '作者',
    key: 'author'
  },
  {
    title: '时间',
    key: 'create_time',
  },
  {
    title: '操作',
    key: 'action',
    render: (row) => renderAction(row, router, dialog, reloadData)
  }
]

async function reloadData() {
  loading.value = true
  data.value = await blog_get_api().finally(() => loading.value = false)
}

onMounted(() => {
  reloadData()
})

const data = ref([])
</script>

<template>
  <n-data-table :columns="columns" :data="data" :bordered="false" :loading="loading"/>
</template>

<style scoped>

</style>